<!-- 发布蒙层 -->
<template>
	<com-mask v-show="Nav.PublishShow.isShow">
		<transition name="slide">
			<div class="com-mask-publish" v-show="Nav.PublishShow.isShow" @click="evt_hideMask">
				<h3>资资乐免费信息发布</h3>
				<ul class="publish-list">
					<li v-for="item in list" act="bg" @click.stop="e => evt_goPublish(e, item.to)">
						<div class="item-icon"><i class="iconfont" :class="item.font"></i></div>
						<div class="item-info">
							<h5>{{item.title}}</h5>
							<p>{{item.info}}</p>
						</div>
					</li>
				</ul>
				<div class="publish-line"></div>
				<div class="publish-btn reverse">
					<i class="iconfont icon-plus"></i>
				</div>
			</div>
		</transition>
	</com-mask>
</template>
<script type="text/javascript">
	import {mapState, mapActions} from 'vuex'
	import * as Acts from '@/store/nav/consts'
	import { isLogined } from '@/service/checkUserLogin'
	import ComMask from './mask'
	export default {
		name: 'com-mask-publish',
		data: () => {
			return {
				list: [
					{
						font: 'icon-hezuo',
						title: '项目合作',
						to: '/publish/cooper',
						info: '代理/租赁/招投标等项目合作信息'
					},
					{
						font: 'icon-jiaoyi',
						title: '资产交易',
						to: '/publish/asset',
						info: '资产转让与收购信息'
					},
					{
						font: 'icon-zuanshi',
						title: '技术服务',
						to: '/publish/tech',
						info: '一技在手，圈里圈外无所不能'
					}
				]
			}
		},
		computed: {
			...mapState(['Nav'])
		},
		methods: {
			evt_hideMask() {
				this[Acts.HIDE_PANEL]()
			},
			evt_goPublish(e, path = '/') {
				let url = '';
				if (isLogined()) {
					url = path;
				} else {
					url = `/login?toUrl=${encodeURIComponent(path)}`;
				}
				location.href = url;
				this[Acts.HIDE_PANEL]()
			},
			...mapActions([Acts.HIDE_PANEL])
		},
		components: {
			[ComMask.name]: ComMask
		}
	}
</script>
<style lang="less">
	@import '../../assets/less/est/all';
	@import '../../assets/less/vars';

	// 发布按钮
	.com-mask-publish {
		padding-top: 2.267rem;
		h3 {
			color: @clr-white;
			font-size: .48rem;
			padding-bottom: .826rem;
			text-align: center;
		}
		.publish-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		.publish-list {
			padding: 0 @card-justify;
			li {
				.display(flex);
				.align-items(center);
				background-color: @clr-white;
				padding: @card-align @card-justify;
				border-radius: 4px;
				.item-icon {
					.size(1.6rem);
					.display(flex);
					.align-items(center);
					.justify-content(center);
					background-color: @clr-l-brown;
					border-radius: 4px;
					color: @clr-white;
					.iconfont {
						font-size: 1rem;
					}
				}
				.item-info {
					.flex(1);
					padding-left: .373rem;
					overflow: hidden;
					h5, p {
						.ellipsis();
						width: 100%;
					}
					h5 {
						color: @clr-dark;
						font-weight: bold;
						font-size: .44rem;
					}
					p {
						font-size: .32rem;
						padding-top: .32rem;
						color: @clr-d-grey;
					}
				}
			}
			li + li {
				margin-top: @card-align;
			}
		}
		.publish-line {
			.size(1px, 5.76rem);
			background-color: @clr-white;
			margin: auto;
		}
	}
</style>